<template>
    <div>
        <div style="display: flex; margin-bottom: 10px" >
            <el-input v-model="name" placeholder="请输入活动名称" suffix-icon="el-icon-search" style="width: 200px;margin-left: 10px " flex:1
                      @keyup.enter.native="loadPost"
            ></el-input>
            <el-select v-model="category" placeholder="请选择活动类型" style="width: 200px; margin-left: 10px">
                <el-option
                    v-for="item in categories"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>

            <el-button type="primary" style="margin-left: 10px" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
            <el-button type="info" @click="add">新增</el-button>
        </div>
        <el-table :data="tableData"
                  :header-cell-style="{background:'darkgrey',color:'black'}"
                  style="height: 100%"
        >
            <el-table-column prop="id" label="ID" width="60">
            </el-table-column>
            <el-table-column prop="name" label="活动名称" width="120">
            </el-table-column>
            <el-table-column prop="category" label="类型">
                <template v-slot="scope">
                    <el-tag
                        :type="scope.row.category === '0' ? 'danger' : (scope.row.category === '1' ? 'warning' : (scope.row.category === '2' ? 'primary' : 'success'))"
                        disable-transitions>{{scope.row.category === '0' ? '分类1' : (scope.row.category === '1' ? '分类2' : (scope.row.category === '2' ? '分类3' : '分类4'))}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题">
            </el-table-column>
            <el-table-column prop="creator" label="创建人">
            </el-table-column>
            <el-table-column prop="activityAbstract" label="活动摘要">
            </el-table-column>
            <el-table-column prop="detailedDesc" label="详细内容">
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="archivedTime" label="归档时间">
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间">
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间">
            </el-table-column>

            <el-table-column prop="operate" label="操作" width="200">
                <template v-slot="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5,10, 20,30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                :before-close="handleClose"
                width="30%"
                center>

            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="类型" prop="category">
                    <el-radio-group v-model="form.category">
                        <el-radio label="1">分类1</el-radio>
                        <el-radio label="2">分类2</el-radio>
                        <el-radio label="3">分类3</el-radio>
                        <el-radio label="4">分类4</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-col :span="20">
                        <el-input v-model="form.title"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="摘要" prop="activityAbstract">
                    <el-col :span="20">
                        <el-input v-model="form.activityAbstract"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="详细内容" prop="detailedDesc">
                    <el-col :span="20">
                        <el-input v-model="form.detailedDesc"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="开始时间" prop="startTime">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="上传图片" prop="picUrls">
                    <el-upload
                        v-model="form.picUrls"
                        class="avatar-uploader"
                        action="http://127.0.0.1:8090/api/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="picUrls" :src="picUrls" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
        </el-dialog>

        <el-dialog
                title="确认删除？"
                :visible.sync="confirmDelete"
                width="30%"
                center>
            <template>
                <el-button size="small"  @click="cancel" style="margin-left: 160px;">取消</el-button>
                <el-button size="small" type="danger" @click="confirm(tableData)">确认</el-button>
            </template>
        </el-dialog>

        <el-dialog
            title="确认删除？"
            :visible.sync="confirmDelete"
            width="30%"
            center>
            <template>
                <el-button size="small"  @click="cancel" style="margin-left: 160px;">取消</el-button>
                <el-button size="small" type="danger" @click="confirm(tableData)">确认</el-button>
            </template>
        </el-dialog>
    </div>

</template>

<script>




export default {
    name: "ActivityPage",
    data() {
        return {
            id:0,
            tableData: [],
            pageSize:10,
            pageNum:1,
            total:0,
            name:'',
            category:'',
            picUrls:'',

            categories:[
                {
                    value: '0',
                    label: '分类1'
                }, {
                    value: '1',
                    label: '分类2'
                }, {
                    value: '2',
                    label: '分类3'
                }, {
                    value: '3',
                    label: '分类4'
                },
            ],
            centerDialogVisible:false,
            confirmDelete:false,
            user:JSON.parse(sessionStorage.getItem('CurUser')),

            form:{
                id:0,
                name:'',
                category:'0',
                title:'',
                creator:'',
                activityAbstract:'',
                detailedDesc:'',
                status:0,
                createdTime:new Date,
                archivedTime:'',
                picUrls:'',
                startTime:'',
                endTime:'',

            },
        }
    },
    methods:{
        loadPost(){
            this.$axios.post('http://localhost:8090/activity/list',{
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                param: {
                    name: this.name,
                    category: this.category
                }}).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.tableData=res.data
                    this.total=res.total
                }else {
                    alert('获取数据失败')
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize=val
            this.loadPost()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum=val
            this.loadPost()
        },
        add(){
            this.centerDialogVisible=true
            this.$nextTick(()=>{
                this.resetForm();
                this.picUrls='';
            })
        },
        resetParam(){
            this.name=''
            this.category=''
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
        save(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if(this.form.id){
                        this.doMod();
                    }else {
                        this.doSave();
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        doSave(){
            this.form.picUrls = this.picUrls;
            this.form.creator=JSON.parse(sessionStorage.getItem('CurUser')).data.loginName
            this.$axios.post('http://localhost:8090/activity/save',this.form).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.centerDialogVisible=false
                    this.loadPost()
                }else {
                    this.$message.error('添加失败');
                }
            })

        },
        doMod(){
            this.$axios.post('http://localhost:8090/activity/update',this.form).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.centerDialogVisible=false
                    this.loadPost()
                }else {
                    this.$message.error('修改失败');
                }
            })

        },
        mod(row){
            this.centerDialogVisible=true
            this.$nextTick(()=>{
                console.log(row)
                this.form.id=row.id
                this.form.name=row.name
                this.form.category=row.category
                this.form.title=row.title
                this.form.activityAbstract=row.activityAbstract
                this.form.detailedDesc=row.detailedDesc
                this.form.picUrls=row.picUrls
                this.form.startTime=row.startTime
                this.form.endTime=row.endTime
            })

        },

        handleAvatarSuccess(res, file) {
            this.picUrls = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(() => {
                    done();
                })
                .catch(() => {});
        },
        del(id){
            this.confirmDelete=true
            this.id=id;
            console.log(id)
        },
        cancel(){
            this.confirmDelete=false
        },
        confirm(id){
            id=this.id
            console.log(id)
            this.$axios.get('http://localhost:8090/activity/del?id='+id).then(res=>res.data).then(res=> {
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.confirmDelete=false
                    this.loadPost()
                }else {
                    this.$message.error('删除失败');
                }
            })
        },
    },

    beforeMount(){
        this.loadPost()
    }

}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>